<template>
  <div class="vipheader">
    <div class="site_topbar">
      <h3><i class="iconfont icon-direction-left"></i> 会员频道</h3>

      <div class="site_header">
        <div class="head_pic">
          <img src="../../../../assets/xiaxia/xiaxia/imgs/18.png" alt="" />
          --会员
        </div>
        <div class="head_menu">
          <h3>
            <a href="#">登录</a>/ <a href="#">注册</a> >
            <span class="">规则</span>
          </h3>
          <van-progress
            inactive
            :percentage="20"
            stroke-width="6"
            color="grey"
          />
          <p class="express_num">当前经验值--</p>
          <p class="next_stage">距离下一等级还差--</p>
        </div>
      </div>

      <!-- 会员权益 -->
      <div class="vip_power">
        <h3>会员权益<i class="iconfont icon-xiangyou">更多</i></h3>
        <div class="vip_power_img">
          <img src="../../../../assets/xiaxia/xiaxia/imgs/19.jpg" alt="" />
        </div>
      </div>

      <div class="r_1awozw3">
        <img src="../../../../assets/xiaxia/xiaxia/imgs/price.gif" alt="" />
      </div>

      <div class="r_1awozw4">
        <img src="../../../../assets/xiaxia/xiaxia/imgs/20.jpg" alt="" />
      </div>

      <new-head></new-head>

      <div class="membership_kill">
        <div class="kill_top">会员秒杀 <span>会员特价</span></div>
        <ul class="kill_botm">
          <li v-for="kill in killlist" :key="kill.id">
            <div class="kill_img">
              <img :src="kill.img" />
            </div>
            <span style="color:#b12331">￥{{kill.newprice}}</span><br>
            <span>￥{{kill.oldprice}}</span>
          </li>
        </ul>
      </div>

      <div class="fuli">
        <img src="../../../../assets/xiaxia/xiaxia/imgs/26.webp" alt="">
      </div>

       <div class="newpel">
        <img src="../../../../assets/xiaxia/xiaxia/imgs/27.webp" alt="">
      </div>

    </div>
  </div>
</template>

<script>
import NewHead from "../NewPelple/NewHead.vue";

export default {
  components: { NewHead },
  name: "VipHead",
  NewHead,
  data(){
    return{
      killlist:[
      {
        img:require("../../../../assets/xiaxia/xiaxia/imgs/22.png"),
        newprice:"1899",
        oldprice:"2899"

      },
      {
        img:require("../../../../assets/xiaxia/xiaxia/imgs/23.png"),
        newprice:"1899",
        oldprice:"2899"

      },
      {
        img:require("../../../../assets/xiaxia/xiaxia/imgs/24.png"),
        newprice:"1899",
        oldprice:"2899"

      },
      {
        img:require("../../../../assets/xiaxia/xiaxia/imgs/25.png"),
        newprice:"1899",
        oldprice:"2899"

      },
      ]
    }
  }
};
</script>

<style scoped>
.vipheader {
  width: 100%;
  height: 12rem;
}
.site_topbar {
  background-image: url(../../../../assets/xiaxia/xiaxia/imgs/17.png);
  background-size: 100% 1.76rem;
  height: 1.76rem;
}
.site_topbar > h3 {
  font-size: 0.2rem;
  color: #fff;
  font-weight: 600;
  height: 0.56rem;
  line-height: 0.56rem;
  margin: 0 0.15rem;
}
.site_topbar > h3 > i {
  margin-right: 0.1rem;
}
.site_header {
  box-sizing: border-box;
  height: 1.2rem;
  background-color: #fff;
  border-radius: 0.15rem;
  margin: 0 15px;
  padding: 0.2rem 0.15rem;

  display: flex;
}
.head_pic {
  width: 0.48rem;
  font-size: 0.12rem;
  color: #333;
  text-align: center;
  margin-right: 0.15rem;
}
.head_pic > img {
  width: 0.48rem;
  height: 0.48rem;
}
.head_menu > h3 {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  height: 0.21rem;
}
.head_menu > h3 > span {
  font-size: 12px;
  color: rgb(204, 204, 204);
  margin-left: 2.2rem;
  font-weight: 400;
}
.express_num {
  font-size: 12px;
  margin: 0.2rem 0 0.1rem 0;
  color: rgb(204, 204, 204);
}
.next_stage {
  font-size: 12px;
  color: rgb(204, 204, 204);
}

.vip_power > h3 {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin: 0.15rem;
}
.vip_power > h3 > i {
  float: right;
  font-size: 0.12rem;
  color: rgb(204, 204, 204);
}
.vip_power_img {
  height: 0.7rem;
  margin: 0 0.15rem;
}
.r_1awozw3 {
  box-sizing: border-box;
  padding: 0 0.15rem;
  height: 1.03rem;
}
.r_1awozw4 {
  height: 1.94rem;
  margin: 0 0.15rem 0.1rem 0.15rem;
  border-radius: 18px;
  overflow: hidden;
}
.r_1awozw3 > img,
.r_1awozw4 > img,
.kill_img>img,
.fuli>img,
.newpel>img {
  width: 100%;
  height: 100%;
}
.membership_kill {
  height: 1.68rem;
  margin: 0.1rem 0.15rem;
  box-sizing: border-box;
  border-radius: .1rem;
  overflow: hidden;
}
.kill_top {
  height: 0.44rem;
  background-image: url(../../../../assets/xiaxia/xiaxia/imgs/21.png);
  background-size: 100% 0.44rem;
  font-weight: 600;
  line-height: 0.44rem;
  font-family: Arial;
  font-size: 0.14rem;
  padding: 0 0.1rem;
}
.kill_top > span {
  margin-left: 1rem;
}
.kill_img{
  width: .58rem;
  height: .58rem;
}
.kill_botm {
font-size: .12rem;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
}
.fuli{
  height: 1.18rem;
  margin: .1rem .15rem;
  border-radius: .1rem;
  overflow: hidden;
}
.newpel {
  height: 1.5rem;
  border-radius: .1rem;
  overflow: hidden;
  margin: 0 .15rem;
}
</style>